<template>
  <div
    id="sysstation"
    v-loading="log"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <!-- <div class="task_top">
            <Form :model="page.search" inline label-position="right" :label-width="100">
                <FormItem label="岗位名称" style="float: left;margin-left: 3%;">
                    <Input type="text" style="width: 230px" size="large" v-model="page.search.pcsname"
                        placeholder="输入岗位名称模糊查询">
                    </Input>
                </FormItem>
                <FormItem label="创建时间" style="margin-left: 7%;">
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </FormItem><br>
                <Button type="error" size="large" style="width: 100px;margin-left: 7%;"
                    @click="queypagelist">搜索</Button>
                <Button size="large" style="margin-left: 2%;width: 100px;" @click="reset">重置</Button>
                <Button size="large" type="info" style="margin-left: 2%;width: 100px;" @click="addbtn">添加</Button>
            </Form>
        </div> -->
    <Card>
      <el-form
        :inline="true"
        :model="page.search"
        class="demo-form-inline"
        style="display: flex; justify-content: space-around"
      >
        <el-form-item label="岗位名称">
          <el-input
            v-model="page.search.pcsname"
            placeholder="输入岗位名称模糊查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            style="width: auto"
            v-model="value1"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div style="margin-left: 20px">
        <Button type="info" @click="queypagelist">搜索</Button>
        <Button style="margin-left: 20px" @click="reset">重置</Button>
        <Dropdown trigger="click" style="margin-left: 20px">
          <Button type="default" href="javascript:void(0)">
            更多
            <Icon type="ios-arrow-down"></Icon>
          </Button>
          <template #list>
            <DropdownMenu>
              <DropdownItem @click.native="addbtn"
                ><Icon type="md-person-add" /> 新增</DropdownItem
              >
              <DropdownItem
                ><Icon type="md-cloud-download" /> 导入</DropdownItem
              >
              <DropdownItem><Icon type="md-cloud-upload" /> 导出</DropdownItem>
            </DropdownMenu>
          </template>
        </Dropdown>
      </div>
    </Card>
    <Divider />
    <div class="task_center">
      <el-table :data="dataTable">
        <el-table-column label="序号" align="center" prop="">
          <template slot-scope="a">
            <span>{{ a.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="岗位名称" align="center" prop="name">
        </el-table-column>
        <el-table-column label="描述" align="center" prop="describes">
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status">
          <template v-slot="z">
            <span style="color: #409eff">
              {{ z.row.status | statusfilter }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createtime">
        </el-table-column>
        <el-table-column label="操作" align="center" prop="planarrivaltime">
          <template slot-scope="scope">
            <div>
              <el-link type="primary" @click="updatebtn(scope.row)"
                ><i class="el-icon-edit"></i> 编辑</el-link
              >
              <el-divider direction="vertical"></el-divider>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @confirm="deleteok(scope.row)"
              >
                <el-link
                  slot="reference"
                  size="small"
                  type="error"
                  style="margin-left: 2%"
                  >删除</el-link
                >
              </el-popconfirm>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        style="margin-left: 20%"
      >
      </el-pagination>
    </div>
    <Modal v-model="modal" title="新增岗位" @on-ok="ok" @on-cancel="cancel">
      <el-form :model="station">
        <el-form-item label="岗位名称：" label-width="100px">
          <Col span="20">
            <el-input v-model="station.name" placeholder=""> </el-input
          ></Col>
        </el-form-item>
        <el-form-item label="状态：" label-width="100px">
          <RadioGroup v-model="station.status">
            <Radio label="1" border>启用</Radio>
            <Radio label="2" border>关闭</Radio>
          </RadioGroup>
        </el-form-item>
        <el-form-item label="描述：" label-width="100px">
          <Col span="20"
            ><Input
              v-model="station.describes"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="Enter something..."
            />
          </Col>
        </el-form-item>
      </el-form>
    </Modal>

    <Modal
      v-model="modal1"
      title="修改岗位"
      @on-ok="updateok"
      @on-cancel="cancel"
    >
      <el-form :model="station">
        <el-form-item label="岗位名称：" label-width="100px">
          <Col span="20"
            ><el-input v-model="station.name" placeholder=""></el-input
          ></Col>
        </el-form-item>
        <el-form-item label="状态：" label-width="100px">
          <RadioGroup v-model="station.status">
            <Radio :label="1" border>启用</Radio>
            <Radio :label="2" border>关闭</Radio>
          </RadioGroup>
        </el-form-item>
        <el-form-item label="描述：" label-width="100px">
          <Col span="20"
            ><Input
              v-model="station.describes"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5 }"
              placeholder="Enter something..."
            />
          </Col>
        </el-form-item>
      </el-form>
    </Modal>
  </div>
</template>

<script>
    export default {
        data() {
            return {
              log: true,
                modal1:false,
                station: {},
                modal: false,
                dataTable: [],
                page: {
                    pageSize: 3,
                    pageNum: 1,
                    total: 0,
                    search: {
                    },
                },
                value1: [],
                data: [
                    {
                        id: 1,
                        cz: 'sss',
                    }
                ],
            }
        },
        methods: {
            updatebtn(x){
                // this.station.id=x.pcsid
                // this.station.name=x.name
                // this.station.status=x.status
                // this.station.describes=x.describes
                this.modal1=true;
                this.station=JSON.parse(JSON.stringify(x));
            },
            updateok(){
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                var z=JSON.parse(sessionStorage.getItem("satoken"))
                this.station.updateUser = z.loginId
                console.log(JSON.stringify(this.station))
                this.axios.post("/api/auth/pd-core-station/updatestation",this.station)
                .then(res => {
                  if (res.data.code == 11051) {
                    loading.close();
                    this.$Message.error(res.data.msg);
                  }
                  if (res.data.code == 200) {
                    this.queypagelist();
                    this.$Message.success("成功修改一条数据!");
                    loading.close();
                  }
                })
                .catch(err => {
                    console.error(err);
                    loading.close();
                })
            },
            deleteok(x) {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                console.log(x.id);

                this.axios.get("/api/auth/pd-core-station/deletestation/" + x.id)
                    .then(res => {
                      if (res.data.code == 11051) {
                        loading.close();
                        this.$Message.error(res.data.msg);
                      }
                      if (res.data.code == 200) {
                        this.queypagelist();
                        this.$Message.success("成功删除一条数据!");
                        loading.close();
                      }
                    })
                    .catch(err => {
                        console.error(err);
                        loading.close();
                    })
            },
            addbtn() {
                this.station={};
                this.modal = true
            },
            ok() {
                const loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                //确定添加
                var z=JSON.parse(sessionStorage.getItem("satoken"))
                this.station.createUser =z.loginId;
                this.axios.post("/api/auth/pd-core-station/addstation", this.station)
                    .then(res => {
                      if (res.data.code == 11051) {
                        loading.close();
                        this.$Message.error(res.data.msg);
                      }
                      if (res.data.code == 200) {
                        this.queypagelist();
                        this.$Message.success("成功新增一条数据!");
                        loading.close();
                      }

                    })
                    .catch(err => {
                        console.error(err);
                        loading.close();
                    })
            },
            cancel() {
                this.$Message.info('取消！');
            },
            queypagelist() {
                this.page.search.starttime = this.value1[0];
                this.page.search.endtime = this.value1[1];
                console.log(this.value1[1])
                console.log(this.value1[0])
                this.axios.post("/api/auth/pd-core-station/querystation", this.page)
                    .then(res => {
                        if (res.data.code == 11051) {
                          this.log = false;
                          this.$Message.error(res.data.msg);
                        }
                        if (res.data.code == 200) {
                          this.dataTable = res.data.data.list;
                          this.page.total = res.data.data.total;
                          console.log(res.data)
                          this.log = false;
                        }
                    })
                    .catch(err => {
                        this.$message.error(err);
                        loading.close();

                    })
            },
            handleSizeChange(val) {
                this.page.pageSize = val
                this.queypagelist()
            },
            handleCurrentChange(val) {
                this.page.pageNum = val;
                this.queypagelist();
            },
            reset() {
                this.value1 = [];
                this.page.search = {};
                this.queypagelist()
            }

        },
        created() {
            this.queypagelist();
        },
        filters: {
            statusfilter: function (val) {
                return val == 1 ? "启用" : "关闭"
            }
        }

    }
</script>

<style scoped></style>
